<template>
  <div class="_wz_cent_main _wz_ElectronicPositioning" style="height: 100%;width: 100%;">
    <div class="baidumap" id="_wz_ElectronicPositioning" style="height: 100%;width: 100%;"></div>
  </div>
</template>
<script>
export default {
  props: ['ElectronicPositioningData'],//接收来自父组件的数据
  data() {
    return {
      trackData:{},
      map: null,//地图
    }
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    var that = this;
    that.mapLoad();
    that.trackFun();
  },
  methods: {//执行的方法
    //地图加载
    mapLoad() {
      let that = this;
      that.map = new BMap.Map("_wz_ElectronicPositioning");    // 创建Map实例
      that.map.centerAndZoom(new BMap.Point(105.058886,36.028623), 4);  // 初始化地图,设置中心点坐标和地图级别
      //添加地图类型控件
      that.map.addControl(new BMap.MapTypeControl({
        mapTypes: [
          BMAP_NORMAL_MAP,
          BMAP_HYBRID_MAP
        ]
      }));
      that.map.setCurrentCity("邢台");          // 设置地图显示的城市 此项是必须设置的
      that.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
      // 左上角，添加比例尺
      let top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});
      that.map.addControl(top_left_control);
      //左上角，添加默认缩放平移控件
      let top_left_navigation = new BMap.NavigationControl();
      that.map.addControl(top_left_navigation);
    },
    //搜索轨迹
    trackFun() {
      let that = this;
      that.trackData.carPlateNo = that.ElectronicPositioningData.vehiclePlateNo;//'冀E211N2';//
      //开始时间
      that.trackData.startTime = !!that.ElectronicPositioningData.beginDate?that.public.timeFormatting(that.ElectronicPositioningData.beginDate, "yyyy-MM-dd hh:mm:ss"):that.public.timeFormatting(new Date(), "yyyy-MM-dd hh:mm:ss");//'2021-02-25 00:00:00';//
      //结束时间
      that.trackData.endTime = !!that.ElectronicPositioningData.endDate?that.public.timeFormatting(that.ElectronicPositioningData.endDate, "yyyy-MM-dd hh:mm:ss"):that.public.timeFormatting(new Date(), "yyyy-MM-dd hh:mm:ss");//'2021-02-25 23:59:59';//
      that.spinShow = true;
      that.axios.post(that.apiUrl.positionTrajectory, that.trackData).then(res => {
        that.spinShow = false;
        if (!!res) {
          if (!!res.data.data && res.data.data.length > 0) {
            ///////轨迹
            let line = [];
            res.data.data.forEach(function (k, i) {
              let marker;

              if (i == 0) {//起点
                let myIcon = new BMap.Icon("../../static/img/vehicleImg/start.png", new BMap.Size(28, 32));
                marker = new BMap.Marker(new BMap.Point(k.lonX, k.latY), {icon: myIcon});  // 创建标注
                marker.setZIndex(999999);
                that.map.addOverlay(marker);           //增加点
              } else if ((i + 1) == res.data.data.length) {//终点
                let myIcon = new BMap.Icon("../../static/img/vehicleImg/End.png", new BMap.Size(28, 32));
                marker = new BMap.Marker(new BMap.Point(k.lonX, k.latY), {icon: myIcon});  // 创建标注
                marker.setZIndex(999999);
                that.map.addOverlay(marker);            //增加点
              }


              line.push(new BMap.Point(k.lonX, k.latY));//线连接点
            })
            let polyline = new BMap.Polyline(line, {
              strokeWeight: '3',//折线的宽度，以像素为单位
              strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
              strokeColor: "#18a45b" //折线颜色
            });   //
            that.map.addOverlay(polyline);          //增加折线
            that.map.setViewport(line);

            ///////轨迹
          } else {
            that.$Message.error('暂未获得到该车辆的轨迹');
          }
        }
      }).catch(err => {
        console.log('失败', err);
      })

    },
  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">

</style>
